$(function (){

    const form = layui.form

    initArtCateList()
// 获取文章分类的列表
    function initArtCateList() {
      // 获取到服务器的数据
        $.ajax({
            method: 'GET',
            url: '/my/article/cates',
            success: function(res) {
                console.log(res)
                // 成功后 将数据填充到模板引擎中
                var htmlStr = template('tpl-table', res)
                // 再将模板引擎的html 添加给表格
                $('tbody').html(htmlStr)
            }
        })
    }


    // 点击按钮的时候 会添加一个弹出层 indexdislog就是这个弹出层的索引
    let indexdislog = null
    $('#btnadd').on('click',function(){
      indexdislog = layer.open({
        type:1,
        title:'添加文章分类',
        content:$('#dialog-add').html(),
        area:['500px','250px']
      })
      console.log(indexdislog);
    })


    //利用事件代理的方式 给form-add表单添加提交事件
    $('body').on('submit','#form-add',function(e){
         e.preventDefault() // 提交前先阻止事件的默认行为
         // 发起ajax请求  将表单内的数据提交到服务器
         $.ajax({
           method:'POST',
           url:'/my/article/addcates',
           data:$(this).serialize(),
           success:function(res){
             if(res.status!==0){
               layer.msg('提交失败!')
             }
             layer.msg('提交成功!')
             // 提交成功之后关闭弹出层
             layer.close(indexdislog)
             // 提交到服务器之后 重新初始化分类列表
             initArtCateList()
           }
         })
    })


    // 点击编辑按钮  出现一个弹出层
    // 通过id获取到对应的数据
    // 将对应的数据渲染到弹出层
    // 修改过后通过点击确认修改按钮 再次发起提交数据请求  再初始化表格 就可以改变表格内当前行的内容
   let  indexedit = null
    $('tbody').on('click','#btn-edit',function(){
      indexedit = layer.open({
        type:1,
        title:'修改文章分类',
        content:$('#dialog-edit').html(),
        area:['500px','250px']
      })

      //获取当前行的id
     const id = $(this).attr('data-id')
     // 发起ajax请求  获取当前id对应的数据
     $.ajax({
      method:'GET',
      url:'/my/article/cates/'+id,
      success:function(res){
       console.log(res);
       form.val('form-edit',res.data)
      },
     })
    })


    // 修改数据的弹出层的提交事件
    $('body').on('submit','#form-edit',function(e){
        e.preventDefault();
        $.ajax({
          method:'POST',
          url:'/my/article/updatecate',
          data:$(this).serialize(),
          success:function(res){
            if(res.status!==0){
              return layer.msg('更新数据失败!')
            }
            layer.msg('更新数据成功!')
            layer.close(indexedit)
            initArtCateList()
          }
        })

    })


    // 点击删除按钮  弹出一个确认删除的提示框  
    // 
    $('tbody').on('click','#btn-delete',function(){
      const id2 = $(this).attr('data-id')
        console.log(id2)
      layer.confirm('确认删除?', {icon: 3, title:'提示'}, function(index){
        $.ajax({
          method:'GET',
          url:'/my/article/deletecate/'+id2,
          success:function(res){
              if(res.status!==0){
                return layer.msg('删除数据失败!')
              }
              layer.msg('删除数据成功!')
              layer.close(index);
              initArtCateList()
          }
        })
        
      });
    })
})